<template>
	<a-modal
		:title="title"
		:width="modalWidth"
		:bodyStyle="bodyStyle"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
		:destroyOnClose="true"
		:maskClosable="false"
	>
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off">
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="说明">
					<a-textarea class="w100" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="题目解析" v-decorator="['note']" />
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内容">
					<a-textarea class="w100" placeholder="题目解析" v-decorator="['name']" v-if="mdl.mode == 0" :auto-size="{ minRows: 3, maxRows: 5 }" />
					<a-upload
						v-else
						v-decorator="[
							'name',
							{
								valuePropName: 'file',
								getValueFromEvent: normFile
							}
						]"
						name="file"
						:action="uploadFile"
						:show-upload-list="false"
						list-type="picture-card"
						class="avatar-uploader"
						:headers="headers"
					>
						<img v-if="imageUrl" :src="imageUrl" alt="avatar" style="max-width: 200px;" />
						<div v-else>
							<a-icon :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text">上传图片</div>
						</div>
					</a-upload>
				</a-form-item>
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { api } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
function getBase64(img, callback) {
	const reader = new FileReader();
	reader.addEventListener('load', () => callback(reader.result));
	reader.readAsDataURL(img);
}
export default {
	name: 'addAccountModal',
	mixins: [ModalMixins],
	data() {
		return {
			uploadFile: process.env.VUE_APP_API_BASE_URL + api.uploadFile,
			loading: false,
			imageUrl: '',
			headers: {
				Authorization: window.localStorage.getItem('token')
			}
		};
	},
	created() {},
	methods: {
		add(record) {
			this.visible = true;
			if (record) {
				this.title = '配置[' + record.code + ']';
				this.isAdd = false;
				this.mdl = { ...record };
				this.init();
			}
		},
		init() {
			this.$nextTick(() => {
				if (this.mdl.mode == 1) {
					this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.name;
				}
				this.form.setFieldsValue(this.$pick(this.mdl, 'note', 'name'));
			});
		},
		close() {
			this.$emit('close');
			this.visible = false;
		},
		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					let parameter = { ...values };
					let { note, name } = parameter;
					_this.confirmLoading = true;
					this.$postAction(
						api.editConfig,
						Object.assign(
							{
								note,
								name
							},
							!this.isAdd ? { code: this.mdl.code, type: this.mdl.type, mode: this.mdl.mode } : null
						)
					)
						.then(res => {
							if (res.code == 200) {
								_this.$message.success('保存成功');
								_this.$emit('ok');
								_this.form.resetFields();
								_this.visible = false;
							}
						})
						.finally(() => {
							_this.confirmLoading = false;
						});
				}
			});
		},
		handleCancel() {
			this.close();
		},
		normFile(e) {
			if (Array.isArray(e)) {
				return e;
			}
			if (e.file.status === 'uploading') {
				this.loading = true;
				return;
			}
			if (e.file.status === 'done') {
				getBase64(e.file.originFileObj, imageUrl => {
					this.imageUrl = imageUrl;
					this.loading = false;
				});
			}
			return e && e.file && e.file.response && e.file.response.data ? e.file.response.data : null;
		},
	}
};
</script>

<style scoped></style>
